<!DOCTYPE html>
<html lang="zh-CN" style="height: 100%">

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>城内网--智慧校园</title>
    <link rel="Shortcut Icon" href="./images/logo.png" />
    <meta name="description" content="本网是针对学生的生活平台，包括学习、考试、交友、交流、商城" />
    <meta name="keywords" content="城内,城内网,智慧大学,智慧校园,在线教学,考勤系统,毕业设计" />
    <link href="{$Think.const.CSS_URL}common.css" rel="stylesheet" />
    <link rel="stylesheet" href="/layui/css/layui.css" media="all" />
    <script src="{$Think.const.JS_URL}jquery-1.12.3.min.js"></script>
    <script src="/layui/layui.js" charset="utf-8"></script>
    <script src="{$Think.const.JS_URL}common.js"></script>
    <script src="{$Think.const.JS_URL}charts.js"></script>

    <script>
        opencookie();
        //退出
        function logout() {
            $.ajax({
                type: 'get',
                url: "{:url('index/my/logout')}",
                dataType: 'text',
                data: {},
                success: function (data) {
                    parent.location.href = "{:url('index/my/index')}";
                },
            });
        }
    </script>

    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <style>
        .left-block {
            width: 60%;
        }

        .right-block {
            width: 40%;
            margin-left: 15px;
        }

        .flex {
            display: flex;
        }

        .score-item {
            position: relative;
        }

        .score-item .avarage-score {
            position: absolute;
            bottom: 8px;
            left: 48%;
            font-size: 16px;
            font-weight: 700;
        }

        .margin-top20 {
            margin-top: 20px;
        }

        .right-begin {
            display: flex;
            justify-content: flex-end;
        }
    </style>
</head>

<body>
    <!-- 顶部菜单 -->
    <ul class="layui-nav">
        <li class="layui-nav-item">
            <a href="{:url('index/score/index')}"><span style="font-size: 1.5em">成绩管理系统</span></a>
        </li>

        <li class="layui-nav-item">
            <a href="#">
                【
                <span id="title000">广东工业大学华立学院</span>
                】
            </a>
        </li>

        <li class="layui-nav-item" style="margin-left: 200px">
            <a href="{:url('index/score/index')}">首页</a>
        </li>

        <li class="layui-nav-item">
            <!-- <a href="{:url('index/score/result_input')}">成绩录入</a> -->
            <a href="{:url('index/score/scoreCheck')}">班级成绩审批</a>
        </li>

        {if condition="session('uid') eq null "}
        <li class="layui-nav-item" style="float: right"><a href="#">注册</a></li>
        <li class="layui-nav-item" style="float: right"><a href="{:url('my/login')}">登录</a></li>
        {else /}
        <li class="layui-nav-item" style="float: right; margin-right: 50px">
            <a href="#" onclick="logout()">退出</a>
        </li>
        <li class="layui-nav-item" style="float: right">
            <a href="#">
                <i class="layui-icon layui-icon-friends"></i>
                {switch name=session('userclass')} {case value="2" break 1}教务处{/case} {case value="1" break 1}{php}echo
                session('truename'){/php}.学院{/case} {case value="3" break 1}教师{/case} {case value="4"}{php}echo session('truename'){/php}.同学{/case}
                {case value="0"}{php}echo session('truename'){/php}.管理员{/case} {/switch}
            </a>
        </li>
        {/if}
    </ul>

    <div class="layui-container-fluid">
        <div class="layui-row">
            <!-- 左边  -->
            <div class="layui-col-xs11" style="background-color: red"></div>

            <!-- 右边 -->
            <div class="layui-col-xs1" style="background-color: blue"></div>
        </div>
    </div>
    <script>
        //用选择的学校名替换“城内网”
        nowselectedschoolid = getCookie('nowselectedschoolid');
        nowselectedschoolname = getCookie('nowselectedschoolname');
        if (nowselectedschoolid == 0 || nowselectedschoolid == undefined || nowselectedschoolid == null) {
            $('#title000').text('广东工业大学华立学院');
        } else {
            $('#title000').text(nowselectedschoolname);
        }
    </script>
    <div class="container-fluid">
        <div class="flex">
            <div class="layui-card left-block">
                <div class="layui-card-body">
                    <span class="from-title">{$nowClass.class_name}考试成绩</span>
                    <label>({$kechengdata.coursename})</label>
                    <ul class="layui-nav nav-select" lay-filter="demo">
                        <li class="layui-nav-item">
                            <a href="javascript:;">{$nowClass.class_name}</a>
                            <dl class="layui-nav-child">
                                {volist name='classData' id='classData'}
                                <dd>
                                    <a
                                        href="{:url('index/score/scoreStatsCheck')}?banjiid={$classData.banjiid}&kechengid={$classData.kechengid}">{$classData.class_name}</a>
                                </dd>
                                {/volist}
                            </dl>
                        </li>
                    </ul>

                    <div>
                        <!-- 表格 -->
                        <table class="layui-hide" id="testTable" lay-filter="tableOption"></table>
                        <!-- 表格工具 -->
                        <script type="text/html" id="toolbarDemo">
                                <!-- <div class="layui-btn-container">
                                        {if session('userclass') == '10' or session('userclass') == ''}
                                        <button class="layui-btn layui-btn-sm" lay-event="add">录入成绩</button>
                                        <button class="layui-btn layui-btn-sm" lay-event="batchdel">批量删除</button>
                                        <button class="layui-btn layui-btn-sm" lay-event="import">导入成绩</button>
                                    </div> -->
                            </script>
                        <script type="text/html" id="barDemo">
                                {if session('userclass') == '1'} {{# if(d.check1 != 0){ }}
                                <a class="layui-btn layui-btn-xs layui-btn-normal">已审核</a>
                                {{# } else { }}
                                <a class="layui-btn layui-btn-xs" lay-event="check">审核</a>
                                {{# } }} {elseif session('userclass') == '2' /} {{# if(d.check2 != 0){ }}
                                <a class="layui-btn layui-btn-xs layui-btn-normal">已审核</a>
                                {{# } else { }}
                                <a class="layui-btn layui-btn-xs" lay-event="check">审核</a>
                                {{# } }} {/if}
                                <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
                                <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
                            </script>
                    </div>
                </div>
            </div>
            <div class="layui-card right-block">
                <div class="layui-card-body">
                    <div class="from-item score-item">
                        <span class="from-title">统计数据</span>
                        <label>({$kechengdata.coursename})</label>
                        <!-- 成绩发布统计图 -->
                        <div id="line" style="width: 100%; height: 320px"></div>
                        <span class="avarage-score">
                            平均分:
                            <i id="averageScore"></i>
                        </span>
                    </div>
                    <!-- <div id="pie1" style="width: 100%; height: 400px"></div> -->
                    <div class="from-item margin-top20">
                        <!-- 考试情况环图 -->
                        <div id="pie" style="width: 100%; height: 200px"></div>
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-card">
            <div class="layui-card-body right-begin">
                <button class="layui-btn" id="passScore">通过</button>
                <button class="layui-btn layui-btn-danger" id="noPassScore">不通过</button>
            </div>
        </div>

        <input type="hidden" value="{$nowClass.class_name}" id="className" />
        <input type="hidden" value="{$nowClass.number}" id="classNum" />
        <!-- 弹出模板框 -->
        <div class="margin-top30 J-temple is-hidden">
            <form class="layui-form layui-fluid J-add-form" lay-filter="formTest">
                <input type="hidden" class="form-control" name="scoreid" value="" placeholder="请输入内容" />
                <input type="hidden" class="form-control" name="id" value="" placeholder="请输入内容" />
                <input type="hidden" class="form-control" id="schoolid" name="schoolid" value="99" placeholder="请输入内容" />

                <div class="">
                    <textarea name="change_reason" id="noPass" placeholder="请输入内容" class="layui-textarea"></textarea>
                </div>
                <!-- </div> -->
            </form>
        </div>
    </div>

    <script>
        var tableData = {};
        $(function () {
            initClass('courselist');
            layuiDate('.J-date');
            initTable(initCharts);
            onCheckClick();

            setTimeout(() => {
            layui.use('element', function () {
                var element = layui.element; //导航的hover效果、二级菜单等功能，需要依赖element模块

                //监听导航点击
                element.on('nav(demo)', function (elem) {
                });
            });
        }, 500);
        });

        function onCheckClick() {
            var parms = {
                banjiid: getUrlVariable('banjiid'),
                id: getUrlVariable('id'),
            };
            $('#passScore').click(function () {
                parms.check = 1;
                checkOprate(parms);
            });

            $('#noPassScore').click(function () {
                parms.check = 2;
                layerOpenInit('不通过原因', $('.J-temple'), function (index) {
                    parms.nopass_reason = $('#noPass').val();
                    checkOprate(parms);
                });
            });
        }

        function checkOprate(parms) {
            var checkUrl = "{:url('score/result_check')}";
            ajaxRequest('post', checkUrl, parms, function (data) {
                data.code == 1 ? successTrip(data) : errorAlert(false, data.msg);
            });
        }

        function initTable(callback) {
            var table;
            // 请求路径
            var requireUrl = {
                add: "{:url('score/result_input_add')}?banjiid=" + getUrlVariable('banjiid') + '&kechengid=' + getUrlVariable('kechengid'),
                edit: "{:url('score/result_input_edit')}?banjiid=" + getUrlVariable('banjiid') + '&kechengid=' + getUrlVariable('kechengid'),
                remove: "{:url('score/result_input_remove')}",
                list: "{:url('score/get_result_input_list')}?banjiid=" + getUrlVariable('banjiid') + '&kechengid=' + getUrlVariable('kechengid'),
            };

            layui.use('table', function () {
                table = layui.table;
                table.render({
                    elem: '#testTable',
                    url: requireUrl.list,
                    toolbar: '#toolbarDemo',
                    title: '考试课程',
                    totalRow: false,
                    cols: [
                        [
                            {
                                type: 'checkbox',
                                fixed: 'left',
                                align: 'center',
                                minWidth: '80',
                            },
                            {
                                field: 'id',
                                title: 'ID',
                                align: 'center',
                                minWidth: '80',
                            },
                            {
                                field: 'student_no',
                                title: '学号',
                                align: 'center',
                                minWidth: '140',
                            },
                            {
                                field: 'studentname',
                                title: '姓名',
                                align: 'center',
                                minWidth: '100',
                            },
                            {
                                field: 'usual_score',
                                title: '平时成绩',
                                align: 'center',
                                // minWidth: '100',
                            },
                            {
                                field: 'test_score',
                                title: '考试成绩',
                                align: 'center',
                                // minWidth: '100',
                            },
                            {
                                field: 'practice_score',
                                title: '实践成绩',
                                align: 'center',
                                // minWidth: '100',
                            },
                            {
                                field: 'total_score',
                                title: '总成绩',
                                align: 'center',
                                // minWidth: '120',
                            },
                            {
                                field: 'create_time',
                                title: '时间',
                                align: 'center',
                                minWidth: '120',
                            },
                        ],
                    ],
                    id: 'testReload',
                    page: true,
                    parseData: function (res) {
                        tableData = res;
                        var num = 0;
                        tableData.scoreSum = 0;
                        tableData.scoreRange = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0];

                        for (var index = 0; index < tableData.length; index++) {
                            var nowVal = tableData[index].total_score;
                            if (nowVal != 0) {
                                num++;
                                tableData.scoreSum += tableData[index].total_score;
                            }
                            var max = 89;
                            var min = 90;

                            for (var i = 0; i < 10; i++) {
                                if (i === 0) {
                                    if (nowVal >= min) {
                                        tableData.scoreRange[i] += 1;
                                        break;
                                    }
                                } else {
                                    if (max >= nowVal && nowVal >= min) {
                                        tableData.scoreRange[i] += 1;
                                        break;
                                    }
                                    max -= 10;
                                }
                                min -= 10;
                            }
                        }
                        // console.log(tableData.scoreRange);
                        tableData.joinTestNum = num;
                        tableData.className = $('#className').val();
                        tableData.classNum = $('#classNum').val();
                        $('#averageScore').text((tableData.scoreSum / tableData.classNum).toFixed(2));
                        callback && callback();
                        return {
                            code: 0,
                            msg: '',
                            count: res.length,
                            data: res,
                        };
                    },
                });

                //工具栏事件
                table.on('toolbar(tableOption)', function (obj) {
                    var checkStatus = table.checkStatus(obj.config.id);
                    switch (obj.event) {
                        case 'add':
                            //  layerOpenInit('考试任务编辑',requireUrl.add)
                            layer.open({
                                type: 2,
                                title: '添加',
                                // skin: 'layui-layer-rim', //加上边框
                                area: ['800px', '620px'], //宽高
                                content: requireUrl.add,
                            });
                            break;
                        case 'batchdel':
                            tableBatchDel(checkStatus, requireUrl.remove);
                            break;
                    }
                });

                //监听行工具事件
                table.on('tool(tableOption)', function (obj) {
                    var data = obj.data;
                    if (obj.event === 'del') {
                        layerConfirm(requireUrl.remove, {
                            id: data.id,
                        });
                    } else if (obj.event === 'edit') {
                        // 编辑
                        layer.open({
                            type: 2,
                            title: '添加',
                            // skin: 'layui-layer-rim', //加上边框
                            area: ['800px', '620px'], //宽高
                            content: requireUrl.edit + '&id=' + data.id,
                        });
                    }
                });
            });

            // 搜索重置操作
            var active = {
                reload: function () {
                    var queryParams = serializeObject($('.J-search-form'));
                    //执行重载
                    table.reload(
                        'testReload',
                        {
                            page: {
                                curr: 1, //重新从第 1 页开始
                            },
                            where: queryParams,
                        },
                        'data'
                    );
                },
            };
            $('.J-search').on('click', function () {
                var type = $(this).data('type');
                active[type] ? active[type].call(this) : '';
            });
            $('.J-reload').on('click', function () {
                $('.J-query-params').val('');
                form.render('select');
                active.reload ? active.reload.call(this) : '';
            });
        }

        function initCharts() {
            var lineChart = echarts.init(document.getElementById('line'));
            option = {
                title: {
                    text: tableData.className + '成绩分布',
                    left: 'center',
                }, //标题
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        // 坐标轴指示器，坐标轴触发有效
                        type: 'shadow', // 默认为直线，可选为：'line' | 'shadow'
                    },
                    formatter: function (data) {
                        return data[0].name + '分:&nbsp&nbsp' + data[0].value + ' (人)';
                    },
                },
                toolbox: {
                    feature: {
                        // dataView: { show: true, readOnly: false },
                        magicType: { show: true, type: ['line', 'bar'] },
                        restore: { show: true },
                        saveAsImage: { show: true },
                    },
                },
                legend: {
                    left: 10,
                    data: ['100-90', '89-80', '79-70', '69-60', '59-50', '49-40', '39-30', '29-20', '19-10', '9-0'],
                },
                xAxis: [
                    {
                        name: '分数段',
                        type: 'category',
                        data: ['100-90', '89-80', '79-70', '69-60', '59-50', '49-40', '39-30', '29-20', '19-10', '9-0'],
                        axisPointer: {
                            type: 'shadow',
                        },
                    },
                ],

                yAxis: [{ name: '人数', type: 'value' }],
                series: [
                    {
                        data: tableData.scoreRange,
                        color: '#7ed3f4',
                        // color: ['#FF6384', '#c14f4f', '#9dba5d', '#8064a1', '#4aabcb', '#f89645', '#15e39d', '#04598f', '#ffde00', '#8d98b3'], //各个区域颜色

                        type: 'bar',
                        // showBackground: true,
                    },
                ],
            };
            lineChart.setOption(option);

            var myChart1 = echarts.init(document.getElementById('pie'));
            option2 = {
                title: {
                    text: tableData.className + '考试情况',
                    left: 'center',
                }, //标题
                tooltip: {
                    trigger: 'item',
                    formatter: '{a} <br/>{b}: {c}人 ({d}%)',
                }, //提示框，鼠标悬浮交互时的信息提示
                legend: {
                    orient: 'vertical',
                    x: 'left',
                    formatter: function (name) {
                        return name;
                    },
                },
                graphic: {
                    type: 'text',
                    left: 'center',
                    top: 'center',
                    style: {
                        text: '班级人数\n' + tableData.classNum, //使用“+”可以使每行文字居中
                        textAlign: 'center',
                        font: 'italic bolder 16px cursive',
                        fill: '#000',
                        width: 30,
                        height: 30,
                    },
                }, //图例属性，以饼状图为例，用来说明饼状图每个扇区，data与下边series中data相匹配
                //此例饼状图为圆环中心文字显示属性，这是一个原生图形元素组件，功能很多
                series: [
                    {
                        name: '考试情况', //tooltip提示框中显示内容
                        type: 'pie', //图形类型，如饼状图，柱状图等
                        radius: ['35%', '50%'],
                        selectedMode: 'single',
                        itemStyle: {
                            normal: {
                                label: {
                                    show: true,
                                    textStyle: { color: '#3c4858', fontSize: '16' },
                                    formatter: function (val) {
                                        //让series 中的文字进行换行
                                        return val.name + val.value;
                                    },
                                },
                            }, //基本样式
                        },
                        emphasis: {
                            itemStyle: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)',
                            },
                        },
                        data: [
                            { value: parseInt(tableData.classNum - tableData.joinTestNum), name: '缺考人数' },
                            { value: parseInt(tableData.joinTestNum), name: '考试人数' },
                        ], //数据，数据中其他属性，查阅文档
                        color: ['#FF6384', '#4de639'], //各个区域颜色
                    }, //数组中一个{}元素，一个图，以此可以做出环形图
                ], //系列列表
            };
            myChart1.setOption(option2);
        }
    </script>

    {include file="my/footer"}
</body>

</html>